<template>
    <table-row-detail-dialog
      ref="detailDialog"
      dialog-title="新增纠错"
      dialog-width="960px"
      @confirm="handleConfirm"
    >
      <div v-if="item" class="dialogBody" style="height: 500px;display:flex">
        <div style="width: 600px;height: 100%;flex-shrink: 0;">
          <div v-if="type == 'ocr'" style="height: 320px;width: 100%;position: relative;">
            <img :src="filePath + item.imgPath" style="height: 100%;width: 100%;object-fit: contain;background-color: black;"/>
          </div>
          <div style="height: calc(100% - 320px);width: 100%;padding: 10px;overflow-y: overlay;"
            :style='type == "audio" ? "height: 100%;" : ""'>
            <RichTextMark :limit="1" :auto="true" :auto-delete="true" @add="addMarkEvent">
              <p>{{ item.content }}</p>
            </RichTextMark>
          </div>
        </div>
        <div style="margin-left: 10px;width: 300px;height: 100%;padding: 10px;">
          <div style="margin-top: 10px;">请在左侧文本内容区域框选标注，然后填写下列表单后提交。</div>
          <el-form :model="formData_addErr" label-position="top" :rules="rules" ref="form">
            <el-form-item label="问题分类" prop="categoryId">
              <el-cascader
                style="width: 100%;"
                v-model="formData_addErr.categoryId"
                :options="categorys"
                :props="{
                  label: 'categoryName',
                  value: 'categoryId',
                  children: 'child',
                  checkStrictly: true,
                  emitPath: false
                }"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-form-item label="问题内容" prop="errContent">
                <el-input v-model="formData_addErr.errContent" disabled></el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-form-item label="正确内容">
                <el-input v-model="formData_addErr.rightContent"></el-input>
              </el-form-item>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </table-row-detail-dialog>
</template>

<script>
import TableRowDetailDialog from '@/components/TableRowDetailDialog/index';
import { getAiCategory, addOcrErr, addAudioErr } from '@/api/serve/media-ai.js';

export default {
  name: 'AddTextMark',
  components: { TableRowDetailDialog },
  data() {
    return {
      filePath: filePath,
      type: 'ocr',
      item: null,
      formData_addErr: {
        id: "",
        categoryId: "",
        errContent: "",
        rightContent: "",
        startPos: 0,
        endPos: 0,
      },
      categorys: [],
      rules: {
        categoryId: [
          { type: 'string', required: true, message: '请选择问题分类', trigger: 'change' }
        ],
        errContent: [
          { type: 'string', required: true, message: '请选择问题内容', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    show(type, item) {
      Object.assign(this.$data, this.$options.data());
      this.type = type;
      this.item = item;
      this.formData_addErr.id = item.id;
      getAiCategory().then((res) => {
        this.categorys = res;
      });
      this.$refs.detailDialog.show('add');
    },
    addMarkEvent(mark) {
      this.formData_addErr.errContent  = mark.text;
      this.formData_addErr.startPos = mark.startMeta.textOffset;
      this.formData_addErr.endPos = mark.endMeta.textOffset;

      this.$refs.form.validateField('errContent');
    },
    handleConfirm(){
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.type == 'ocr') {
            this.formData_addErr['ocrId'] = this.formData_addErr['id'];
            await addOcrErr(this.formData_addErr);
          } else if (this.type == 'audio') {
            this.formData_addErr['audioId'] = this.formData_addErr['id'];
            await addAudioErr(this.formData_addErr);
          } else {
            return;
          }
          this.$message.success('提交成功');
          this.$emit('success', this.type);
          this.$refs.detailDialog.hide();
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>

</style>